<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 百度ECHarts</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico"> <link href="static/templet/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="static/templet/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

    <link href="static/templet/css/animate.min.css" rel="stylesheet">
    <link href="static/templet/css/style.min862f.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div style="height: 300px" id="deduc"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">

                        <div style="height: 300px" id="recharge"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="static/templet/js/jquery.min.js?v=2.1.4"></script>
    <script src="static/templet/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="static/templet/js/plugins/echarts/echarts-all.js"></script>
    <script src="static/templet/js/content.min.js?v=1.0.0"></script>
    <script type="text/javascript">
    var myDeduc = echarts.init(document.getElementById('deduc'));
 
    var myRecharge = echarts.init(document.getElementById('recharge'));
    myDeduc.showLoading();
    myRecharge.showLoading();
    $.post('report/getReportIndex', function(data, status){
		if(status == 'success'){
			var result = data.result;
			var state = result.state;
			if(state == 1){
				myDeduc.hideLoading();    //隐藏加载动画
				myDeduc.setOption({        //加载数据图表
                	title : {
            			text : "连续30天扣费情况"
            		},
            		tooltip : {
            			trigger : "axis"
            		},
            		legend : {
            			data : [ "金额"]
            		},
            		grid : {
            			x : 60,
            			x2 : 40,
            			y2 : 24
            		},
            		calculable : !0,
            		xAxis : [ {
            			type : "category",
            			boundaryGap : !1,
            			data : data.xAxis
            		} ],
            		yAxis : [ {
            			type : "value",
            			axisLabel : {
            				formatter : "{value} ￥"
            			}
            		} ],
            		series : [ {
            			name : "金额",
            			type : "line",
            			data : data.deducList,
            			markPoint : {
            				data : [ {
            					type : "max",
            					name : "最大值"
            				}, {
            					type : "min",
            					name : "最小值"
            				} ]
            			},
            			markLine : {
            				data : [ {
            					type : "average",
            					name : "平均值"
            				} ]
            			}
            		}]
                });
				
				myRecharge.hideLoading();    //隐藏加载动画
				myRecharge.setOption({        //加载数据图表
                	title : {
            			text : "连续30天充值情况"
            		},
            		tooltip : {
            			trigger : "axis"
            		},
            		legend : {
            			data : [ "金额"]
            		},
            		grid : {
            			x : 60,
            			x2 : 40,
            			y2 : 24
            		},
            		calculable : !0,
            		xAxis : [ {
            			type : "category",
            			boundaryGap : !1,
            			data : data.xAxis
            		} ],
            		yAxis : [ {
            			type : "value",
            			axisLabel : {
            				formatter : "{value} ￥"
            			}
            		} ],
            		series : [ {
            			name : "金额",
            			type : "line",
            			data : data.rechargeList,
            			markPoint : {
            				data : [ {
            					type : "max",
            					name : "最大值"
            				}, {
            					type : "min",
            					name : "最小值"
            				} ]
            			},
            			markLine : {
            				data : [ {
            					type : "average",
            					name : "平均值"
            				} ]
            			}
            		}]
                });
			}else{
				myDeduc.hideLoading();
				myRecharge.hideLoading();
			}
		}
	})
    
    </script>
</body>

</html>
